<template>
  <div class="app-container">
    <div class="allocation-tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="商户配置" name="first">
          <div>
            <el-form ref="MerchantForm" :model="MerchantForm" :inline="true" label-width="120px" size="small">
              <el-row :gutter="10">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="商户入驻" required>
                    <el-select v-model="MerchantForm.is_merchant_enter" placeholder="请选择商户入驻状态">
                      <el-option label="开启" :value="1"></el-option>
                      <el-option label="关闭" :value="2"></el-option>
                    </el-select>
                    <div class="tip">注：商户入驻关闭后，平台不允许商户入驻</div>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="个人入驻" required>
                    <el-select v-model="MerchantForm.is_person_enter" placeholder="请选择个人入驻状态">
                      <el-option label="开启" :value="1"></el-option>
                      <el-option label="关闭" :value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="自动审核" required>
                    <el-select v-model="MerchantForm.auto_check" placeholder="请选择自动审核状态">
                      <el-option label="开启" :value="1"></el-option>
                      <el-option label="关闭" :value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="合同签署" required>
                    <el-select v-model="MerchantForm.pact_sign" placeholder="请选择合同签署方式">
                      <el-option label="线上签署" :value="2"></el-option>
                      <el-option label="线下签署" :value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="保证金缴纳" required>
                    <el-select v-model="MerchantForm.bail_payment" placeholder="请选择保证金缴纳方式">
                      <el-option label="实际缴纳" :value="1"></el-option>
                      <el-option label="平台减免" :value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="submitbtn">
              <el-button type="primary" size="small" @click="submitMerchantForm('MerchantForm')"
                class="savebtn">保存</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="电子合同配置" name="second">
          <el-empty description="正在开发中..."></el-empty>
        </el-tab-pane>
        <el-tab-pane label="商户提现配置" name="third">
          <div>
            <el-form ref="WithdrawalForm" :rules="WithdrawalRules" :inline-message="true" :model="WithdrawalForm"
              :inline="true" label-width="120px" size="small">
              <div class="blockquote-box">最低提现配置</div>
              <el-row :gutter="10">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="提现费率" prop="rate">
                    <el-input v-model="WithdrawalForm.rate" placeholder="请填写提现费率">
                      <span slot="suffix">%</span>
                    </el-input>
                    <div class="tip">商户提现的手续费，单位为%。例:100*0.3%=提现手续费</div>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="最低提现额" prop="min_price">
                    <el-input v-model="WithdrawalForm.min_price" placeholder="请填写最低提现额"></el-input>
                    <div class="tip">系统设置的商户最低提现金额，系统默认支持的最小提现金额为1，当商户提现数量小于100时系统无法计算提现手续费，可开启最小手续费。</div>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="最小手续费" prop="MinimumCommission">
                    <el-input v-model="WithdrawalForm.MinimumCommission" placeholder="请填写最小手续费"></el-input>
                    <div class="tip">商户提现时手续费率小于【配置金额】时按照【配置金额】生效;例:商户提现100*0.3%=0.3 系统按照 【配置金额】收费</div>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="blockquote-box">免额配置</div>
              <el-row :gutter="10">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="免手续费" required>
                    <el-radio-group v-model="WithdrawalForm.is_charge">
                      <el-radio label="1">开启</el-radio>
                      <el-radio label="2">关闭</el-radio>
                    </el-radio-group>
                    <div class="tip">开启后，平台可为商家设置一定额度的免费提现额度，超出免费额度后系统按照提现费率收取提现通道手续费</div>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="统一免额度" prop="avoid_charge_price">
                    <el-input v-model="WithdrawalForm.avoid_charge_price" placeholder="请填写统一免额度"></el-input>
                    <div class="tip">平台为商家提供一定额度的免费提现额度，超出免费额度后系统按照提现费率收取提现通道手续费</div>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="blockquote-box">提现审核配置</div>
              <el-row :gutter="10">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="审核配置" required>
                    <el-radio-group v-model="WithdrawalForm.is_check">
                      <el-radio label="1">人工审核</el-radio>
                      <el-radio label="2">系统审核</el-radio>
                    </el-radio-group>
                    <div class="tip">使用系统审核时，系统自动审核 商户的提现金额是否满足提现要求，不满足时系统自动驳回。系统出款失败时，转至人工审核。</div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="submitbtn">
              <el-button type="primary" size="small" @click="submitWithdrawalForm('WithdrawalForm')"
                class="savebtn">保存</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
//获取商户配置信息,更新商户配置信息,获取商户提现配置信息,更新商户提现配置信息
import { GetMerchantConfigInfo, updateMerchantConfigInfo, GetMerchantWithdrawConfigInfo,updateMerchantWithdrawConfigInfo } from '@/api/merchant/index'
export default {
  data() {
    return {
      //tabs
      activeName: 'first',
      //form
      MerchantForm: {
        is_merchant_enter: '1',//商户入驻:1开启 2关闭
        is_person_enter: '1',//个人入驻: 1开启 2关闭
        auto_check: '1',//自动审核: 1开启 2关闭
        pact_sign: '1',//合同签署:1线下签署 2线上签署
        bail_payment: '0',//保证金缴纳:1实际缴纳 2平台减免
      },
      WithdrawalForm: {
        rate: '',//提现费率
        min_price: '',//最低提现额
        MinimumCommission: '',//最小手续费
        is_charge: '1',//免手续费:1开启 2关闭
        avoid_charge_price: '',//统一免额度
        is_check: '1',//审核配置:1人工审核 2自动审核
      },
      WithdrawalRules: {
        // 提现费率
        rate: [
          { type: 'number',required: true, message: '请正确填写提现费率', trigger: 'blur', transform: (value) => Number(value) }
        ],
        //最低提现额
        min_price: [
          { type: 'number',required: true, message: '请填写最低提现额', trigger: 'blur', transform: (value) => Number(value)  }
        ],
        //最小手续费
        MinimumCommission: [
          { type: 'number',required: true, message: '请正确填写最小手续费', trigger: 'blur', transform: (value) => Number(value)  }
        ],
        //统一免额度
        avoid_charge_price: [
          { type: 'number',required: true, message: '请正确填写统一免额度', trigger: 'blur', transform: (value) => Number(value)  }
        ],

      }
    };
  },
  mounted() {
    this.getconfiginfo();
  },
  methods: {
    //tabs切换
    handleClick() {
      if(this.activeName=='first'){
        this.getconfiginfo();
      }else if(this.activeName=='third'){
        this.getWithdrawConfigInfo()
      }
    },
    getconfiginfo() {
      GetMerchantConfigInfo().then((res) => {
        // console.log(res);
        this.MerchantForm = res.data;
      }).catch(() => {
      });
    },
    getWithdrawConfigInfo() {
      GetMerchantWithdrawConfigInfo().then((res) => {
        console.log(res);
        this.WithdrawalForm = res.data;
      }).catch(() => {
      });
    },
    //商户配置提交
    submitMerchantForm(formName) {
      updateMerchantConfigInfo(this.MerchantForm).then((res) => {
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.getconfiginfo();
      }).catch(() => {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      });
    },
    //商户提现配置提交
    submitWithdrawalForm(formName) {
      updateMerchantWithdrawConfigInfo(this.WithdrawalForm).then((res) => {
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.getWithdrawConfigInfo();
      }).catch(() => {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 10px 20px;

  .allocation-tabs {
    .tip {
      margin-top: 5px;
      font-size: 12px;
      color: #717171;
      line-height: 16px;
    }

    .submitbtn {
      margin-top: 30px;
      width: 100%;
      text-align: center;
      margin-bottom: 50px;

      .savebtn {
        height: 30px;
        width: 120px;
      }
    }

    .blockquote-box {
      border-left: 4px solid #409eff;
      padding-left: 16px;
      margin: 16px 0;
      height: 40px;
      line-height: 40px;
      background: #fafafa;
      font-size: 16px;
    }
  }
}
</style>
<style lang="scss">
.allocation-tabs {

  //tabs
  .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    z-index: 1;
  }

  //form
  .el-form-item {
    display: flex;
    width: 100%;
  }

  .el-form-item__content {
    width: 100%;
  }

  .el-select {
    width: 100%;
  }

}
</style>
